import { PageContainer } from '@ant-design/pro-components';
import { Button, Form, Input, InputNumber, message, Card, Space, Typography } from 'antd';
import React from 'react';
import { DownloadOutlined, FileExcelOutlined } from '@ant-design/icons';
import { BACKEND_HOST_PROD } from '@/constants';
import styles from './index.module.css';

const { Title, Paragraph } = Typography;

const ExportPage: React.FC = () => {
  const [form] = Form.useForm();

  const handleExport = async (values: { prefix: string; num: number }) => {
    try {
      window.location.href =
        BACKEND_HOST_PROD +
        '/api/download?prefix=' +
        encodeURIComponent(values.prefix) +
        '&num=' +
        values.num;
    } catch (error) {
      console.log(error);
      message.error('导出失败，请重试！');
    }
  };

  return (
    <PageContainer
      header={{
        title: '导出编码',
        ghost: true,
      }}
      className={styles.pageContainer}
    >
      <div className={styles.container}>
        <Card
          className={styles.exportCard}
          bordered={false}
          title={
            <Space>
              <FileExcelOutlined style={{ fontSize: '24px', color: '#52c41a' }} />
              <Title level={4} style={{ margin: 0 }}>
                Excel导出工具
              </Title>
            </Space>
          }
        >
          <div className={styles.content}>
            <div>
              <Paragraph className={styles.description}>
                本工具用于生成层级编码Excel文件。请输入所需的前缀和数量，系统将自动生成对应的编码表格。
              </Paragraph>

              <Form form={form} onFinish={handleExport} layout="vertical" className={styles.form}>
                <Form.Item
                  label="前缀"
                  name="prefix"
                  rules={[{ required: true, message: '请输入前缀' }]}
                  tooltip="输入编码的前缀部分，例如: CODE"
                >
                  <Input
                    placeholder="请输入编码前缀"
                    size="large"
                    prefix={<span style={{ color: '#888' }}>#</span>}
                  />
                </Form.Item>

                <Form.Item
                  label="生成数量"
                  name="num"
                  rules={[{ required: true, message: '请输入生成数量' }]}
                  tooltip="请输入需要生成的编码数量，范围1-10000"
                >
                  <InputNumber
                    min={1}
                    max={10000}
                    style={{ width: '100%' }}
                    placeholder="请输入需要生成的数量"
                    size="large"
                  />
                </Form.Item>

                <Form.Item>
                  <Button
                    type="primary"
                    htmlType="submit"
                    block
                    size="large"
                    icon={<DownloadOutlined />}
                    className={styles.submitButton}
                  >
                    生成并下载Excel
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </div>
        </Card>
      </div>
    </PageContainer>
  );
};

export default ExportPage;
